<template>

    <div class="icons">
      <swiper :options="swiperOption">
        <swiper-slide v-for="(page,index) in pages" :key="index">
          <div class="icon" v-for="(item,index) in page" :key="item.id">
            <img :src="item.imgUrl">
            <p>{{item.desc}}</p>
          </div>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
</template>

<script>
    export default {
        name: "icons",
      props:{
        iconList:Array,
      },
      data(){
          return{
            swiperOption:{
              pagination:".swiper-pagination"
            },
            // iconUrl:[
            //   {id:"001",imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",desc:"景点门票"},
            //   {id:"002",imgUrl:"http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png",desc:"一日游"},
            //   {id:"003",imgUrl:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20194/437aad2dd0c1edb38fee0c51f8f9dd02.png",desc:"热门演出"},
            //   {id:"004",imgUrl:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20191/de711920c71e38287d9f95f7910aa1aa.png",desc:"精品小团"},
            //   {id:"005",imgUrl:"http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png",desc:"西安必游"},
            //   {id:"006",imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png",desc:"动植物园"},
            //   {id:"007",imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png",desc:"华清宫"},
            //   {id:"008",imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/fa/2548667cb6e902.png",desc:"兵马俑"},
            //   {id:"009",imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/ab/6f7d6e44963c9302.png",desc:"泡温泉"}
            // ]
          }
      },
      computed:{
          pages(){
            const pages = [];
            this.iconList.forEach((item,index)=>{
              const page = Math.floor(index / 8);
              if(!pages[page]){
                pages[page]=[];
              }
                pages[page].push(item);
            });
            return pages;
          }
      }
    }
</script>

<style scoped lang="stylus">
    .icons>>>.swiper-container{
      height:0;
      padding-bottom 50%;
    }
    .icons >>> .swiper-container-horizontal >.swiper-pagination-bullet{
          bottom:1px;
           }
      .icons >>> .swiper-pagination-bullet-active{
        background :#00bcd4;
      }
    .icons
      width :100%;
      height :0;
      padding-bottom :50%;
      overflow :hidden;
    .icon
      width :25%;
      text-align :center;
      float :left;
      height :0;
      padding-bottom: 25%;
      img{
        width :60%;
        margin-top :0.07rem;
      }
      p{
        color: #6f6f6f;
        margin-top :0.03rem;
        font-size:.12rem;
      }

</style>
